<template>
  <div :class="className" :style="{ height: height, width: width }"></div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

import { deviceState } from '@/api/homePage'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    }
  },
  data() {
    return {
      data: [],
      chart: null
    }
  },
  mounted() {
    this.doQuery()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    doQuery() {
      deviceState().then(({ data: { data } }) => {
        // console.log(data)
        this.data = [
          { value: data.offline, name: '离线' },
          { value: data.online, name: '在线' },
          { value: data.sleep, name: '休眠' }
        ]
        this.initChart()
      })
    },
    initChart() {
      var _dataList = this.data
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        title: {
          text: '设备状态'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          // y: 'bottom',
          bottom: 30,
          itemGap: 60,
          textStyle: {
            fontSize: 15,
            color: '#008acd',
            rich: {
              a: {
                fontSize: 16,
                verticalAlign: 'top',
                align: 'center',
                padding: [0, 0, 28, 0]
              },
              b: {
                fontSize: 24,
                align: 'center',
                padding: [-15, 15, 0, 0],
                lineHeight: 25,
                color: '#008acd'
              }
            }
          },
          icon: 'circle',
          // 重写legend显示样式
          data: this.data,
          formatter: function(name) {
            var data = _dataList
            var target
            // var total = 0
            for (var i = 0, l = data.length; i < l; i++) {
              // total += data[i].value
              if (data[i].name == name) {
                //eslint-disable-line
                target = data[i].value
              }
            }
            // console.log(name)
            // console.log(data)
            var arr = ['{a|' + name + '}', '{b|' + target + '}']
            // return name + ' ' + ((target/total)*100).toFixed(2) + '%';
            return arr.join('\n')

            // return name + ' '+'\n'+target
          }
        },
        itemStyle: {
          normal: {
            borderWidth: 20,
            borderColor: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['38%', '50%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            startAngle: 90,
            label: {
              normal: {
                // formatter: '{hr|}\n  {b|{b}：}{c}  ',
                // backgroundColor: '#eee',
                // borderColor: '#aaa',
                // borderWidth: 1,
                // borderRadius: 4,
                show: false,
                position: 'center',
                rich: {
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            data: this.data
          }
        ]
      })
    }
  }
}
</script>
